<template>
  <div>
           <div class="my_div">
      <img :src="img" alt="" />
      <p :style="{ backgroundColor: colorStr }" @click="btn">{{ name }}</p>
    </div>
  </div>
  
</template>

<script>
export default {
        props:['img','name','index'],
         data() {
    return {
      colorStr: '',
    }
  },
  methods: {
    btn() {
      this.colorStr = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(
        Math.random() * 256
      )},${Math.floor(Math.random() * 256)})`
      this.$emit('likedog',this.index)
    },
  },
}
</script>

<style scoped>
         .my_div {
       float: left;
       width: 400px;
       height: 290px;
       text-align: center;
       border: 1px solid black;
    }
   .my_div img {
    width: 100%;
     background-size: cover;
   }
</style>